<template>
    <v-chart :option="option" autoresize></v-chart>
</template>

<script>
export default {
    name: "z-gender-chart",
    data() {
        return {
            data: [
                { value: 54, name: "男" },
                { value: 46, name: "女" }
            ],
            option: {
                color: ["#25A1E5", "#ED427A"],
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(20, 31, 59, 0.7)",
                    textStyle: {
                        color: "#fff"
                    },
                    formatter: '{a0}<br />{b0}: {c0}%'
                },
                legend: {
                    orient: "vertical",
                    itemWidth: 11,
                    itemHeight: 11,
                    left: 12,
                    top: "10%",
                    itemGap: 18,
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    },
                    formatter: name => {
                        const value = this.data.find(item => item.name === name)
                            .value;
                        return name + "：" + value + "%";
                    }
                },
                series: [
                    {
                        name: "性别占比",
                        type: "pie",
                        radius: ["50%", "80%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false
                        },
                        left: "45%",
                        top: "-5%",
                        data: [
                            { value: 54, name: "男" },
                            { value: 46, name: "女" }
                        ]
                    }
                ]
            }
        };
    }
};
</script>